<template>
    <div class="relative rounded cursor-pointer">
        <div class="absolute bottom-3 px-2 z-10 w-full flex justify-between">
            <div>
                <Movie v-if="type == 'movie'" theme="filled" size="24" fill="#909399" />
                <Music v-if="type == 'music'" theme="filled" size="24" fill="#909399" />
                <Picture v-if="type == 'picture'" theme="filled" size="24" fill="#909399" />
                <Book v-if="type == 'book'" theme="filled" size="24" fill="#909399" />
            </div>
            <div class="text-warning">{{ score }}</div>
        </div>
        <div class="w-full absolute top-2 px-2 z-10 flex flex-wrap gap-1">
            <HyalineTag v-for="tag in tags" :name="String(tag)" />
        </div>
        <el-image :src="src" fit="cover" class="rounded" />
    </div>
</template>

<script setup lang="ts">
import { Movie, Music, Picture, Book } from '@icon-park/vue-next';

defineProps({
    type: { type: String, default: "" },
    tags: { type: Array, default: ["jjj", "jjj", "jjj"] },
    score: { type: Number, default: 7.9 },
    src: { type: String, default: "" }
})
</script>

<style scoped></style>